<script setup>
// isShow 表示是否显示，注意：传入 reactive 的形如 {value: true} 的对象才能响应式
// isExitClickMask 点击背景是否消失


// import { ref } from 'vue'
const props = defineProps(['isShow', 'isExitClickMask'])
const maskClick = () => {
  console.log(props.isExitClickMask)
  if (props.isExitClickMask) props.isShow.value = false
}
</script>

<template>
  <teleport to="body" v-if="isShow.value">
    <div class="mask" @click.self="maskClick">
      <div class="window">
        <slot></slot>
      </div>
    </div>
  </teleport>
</template>

<style scoped lang="less">
.mask {
  /* border: 1px solid red; */
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);

  width: 100%;
  height: 100%;

  .window {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
    // min-width: 50px;
    // min-height: 50px;
    // background-color: blue;
  }
}
</style>